
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>经典页面布局，任何分辨率下，全屏显示</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-treeview.min.css">
    <style type="text/css">
        *{ list-style:none; margin:0; padding:0;}
        html{ height:100%; overflow:hidden;}
        body{  height:100%;}
        .hall{height: 100%;margin-left: -15px;}
        .clo-zStyle{
            height: 100%;background-color: red;
            border-style: solid;
            border-top-width: 3px;
            border-right-width: 3px;
            border-bottom-width: 3px;
            border-left-width: 3px;}
            .price-content {
                padding-left:-100px;
                padding-right:100px;
            }

    </style>

</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
      <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>
<div class="container-fluid hall">

    <div class="row-fluid hall">
        <div class="col-lg-1 col-md-1 col-xs-2 col-sm-2 clo-zStyle">
            <blockquote>
              <p class="bg-primary">...</p>
            </blockquote>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-10 col-sm-5 clo-zStyle">2</div>
        <div class="col-lg-4 col-md-4 col-sm-5 hidden-xs clo-zStyle">3</div>
        <div class="col-lg-4 col-md-4 hidden-sm  hidden-xs clo-zStyle">4</div>
    </div>
</div>


<script type="application/javascript" src="/static/js/less.min.js?2.5.3"></script>
<script type="application/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="application/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="application/javascript" src="/static/js/bootstrap-treeview.min.js"></script>
</body>
</html>